import { EmblemProps } from 'pages/Portfolio/components/AnimatedStyledBanner/Emblems/types'
import { useId } from 'react'
import { useSporeColors } from 'ui/src'

export function EmblemC({ fill = '#FF37C7', opacity = 1, ...props }: EmblemProps): JSX.Element {
  const colors = useSporeColors()
  const clipPathId = useId()

  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <g clipPath={`url(#${clipPathId})`}>
        <path
          d="M7.99948 0C6.89491 7.11679e-05 5.99954 0.895559 5.99961 2.00013C5.99968 3.1047 6.8957 4.00007 8.00027 4C9.10484 4.00007 10.0003 3.1047 10.0004 2.00013C10.0005 0.895559 9.1051 7.11679e-05 8.00053 0H7.99948Z"
          fill={colors.surface1.val}
        />
        <path
          d="M13.6565 2.34278C12.8754 1.56178 11.6091 1.56186 10.8281 2.34296C10.0471 3.12406 10.0475 4.39076 10.8286 5.17176C11.6096 5.95286 12.8759 5.95294 13.657 5.17194C14.4381 4.39094 14.4382 3.12461 13.6572 2.34352L13.6565 2.34278Z"
          fill={colors.surface1.val}
        />
        <path
          d="M5.17177 5.17139C5.95287 4.39039 5.95295 3.12406 5.17195 2.34296C4.39095 1.56186 3.12462 1.56178 2.34352 2.34278L2.34278 2.34352C1.56179 3.12462 1.56187 4.39094 2.34297 5.17194C3.12407 5.95294 4.39077 5.95249 5.17177 5.17139Z"
          fill={colors.surface1.val}
        />
        <path
          d="M4.00001 7.99973C4.00008 6.89516 3.10471 5.99968 2.00014 5.9996C0.895567 5.99953 7.87973e-05 6.89491 7.62939e-06 7.99948V8.00052C7.87973e-05 9.10509 0.895567 10.0005 2.00014 10.0004C3.10471 10.0003 4.00008 9.1043 4.00001 7.99973Z"
          fill={colors.surface1.val}
        />
        <path
          d="M16 7.99948C15.9999 6.89491 15.1044 5.99953 13.9999 5.99961C12.8953 5.99968 11.9999 6.8957 12 8.00027C11.9999 9.10484 12.8953 10.0003 13.9999 10.0004C15.1044 10.0005 15.9999 9.10509 16 8.00052V7.99948Z"
          fill={colors.surface1.val}
        />
        <path
          d="M5.1714 10.8282C4.3904 10.0471 3.12407 10.0471 2.34297 10.8281C1.56187 11.6091 1.56179 12.8754 2.34278 13.6565L2.34352 13.6572C3.12462 14.4382 4.39095 14.4381 5.17195 13.657C5.95295 12.8759 5.95249 11.6092 5.1714 10.8282Z"
          fill={colors.surface1.val}
        />
        <path
          d="M13.6572 13.6565C14.4382 12.8754 14.4381 11.6091 13.657 10.8281C12.8759 10.0471 11.6092 10.0475 10.8282 10.8286C10.0471 11.6096 10.0471 12.8759 10.8281 13.657C11.6091 14.4381 12.8754 14.4382 13.6565 13.6572L13.6572 13.6565Z"
          fill={colors.surface1.val}
        />
        <path
          d="M7.99974 12C6.89517 11.9999 5.99968 12.8953 5.99961 13.9999C5.99954 15.1044 6.89491 15.9999 7.99948 16H8.00053C9.1051 15.9999 10.0005 15.1044 10.0004 13.9999C10.0003 12.8953 9.10431 11.9999 7.99974 12Z"
          fill={colors.surface1.val}
        />
        <path
          d="M8.00001 11C9.65686 11 11 9.65685 11 8C11 6.34315 9.65686 5 8.00001 5C6.34315 5 5.00001 6.34315 5.00001 8C5.00001 9.65685 6.34315 11 8.00001 11Z"
          fill={colors.surface1.val}
        />
      </g>
      <g clipPath={`url(#${clipPathId})`}>
        <path
          d="M7.99948 0C6.89491 7.11679e-05 5.99954 0.895559 5.99961 2.00013C5.99968 3.1047 6.8957 4.00007 8.00027 4C9.10484 4.00007 10.0003 3.1047 10.0004 2.00013C10.0005 0.895559 9.1051 7.11679e-05 8.00053 0H7.99948Z"
          fill={fill}
          opacity={opacity}
        />
        <path
          d="M13.6565 2.34278C12.8754 1.56178 11.6091 1.56186 10.8281 2.34296C10.0471 3.12406 10.0475 4.39076 10.8286 5.17176C11.6096 5.95286 12.8759 5.95294 13.657 5.17194C14.4381 4.39094 14.4382 3.12461 13.6572 2.34352L13.6565 2.34278Z"
          fill={fill}
          opacity={opacity}
        />
        <path
          d="M5.17177 5.17139C5.95287 4.39039 5.95295 3.12406 5.17195 2.34296C4.39095 1.56186 3.12462 1.56178 2.34352 2.34278L2.34278 2.34352C1.56179 3.12462 1.56187 4.39094 2.34297 5.17194C3.12407 5.95294 4.39077 5.95249 5.17177 5.17139Z"
          fill={fill}
          opacity={opacity}
        />
        <path
          d="M4.00001 7.99973C4.00008 6.89516 3.10471 5.99968 2.00014 5.9996C0.895567 5.99953 7.87973e-05 6.89491 7.62939e-06 7.99948V8.00052C7.87973e-05 9.10509 0.895567 10.0005 2.00014 10.0004C3.10471 10.0003 4.00008 9.1043 4.00001 7.99973Z"
          fill={fill}
          opacity={opacity}
        />
        <path
          d="M16 7.99948C15.9999 6.89491 15.1044 5.99953 13.9999 5.99961C12.8953 5.99968 11.9999 6.8957 12 8.00027C11.9999 9.10484 12.8953 10.0003 13.9999 10.0004C15.1044 10.0005 15.9999 9.10509 16 8.00052V7.99948Z"
          fill={fill}
          opacity={opacity}
        />
        <path
          d="M5.1714 10.8282C4.3904 10.0471 3.12407 10.0471 2.34297 10.8281C1.56187 11.6091 1.56179 12.8754 2.34278 13.6565L2.34352 13.6572C3.12462 14.4382 4.39095 14.4381 5.17195 13.657C5.95295 12.8759 5.95249 11.6092 5.1714 10.8282Z"
          fill={fill}
          opacity={opacity}
        />
        <path
          d="M13.6572 13.6565C14.4382 12.8754 14.4381 11.6091 13.657 10.8281C12.8759 10.0471 11.6092 10.0475 10.8282 10.8286C10.0471 11.6096 10.0471 12.8759 10.8281 13.657C11.6091 14.4381 12.8754 14.4382 13.6565 13.6572L13.6572 13.6565Z"
          fill={fill}
          opacity={opacity}
        />
        <path
          d="M7.99974 12C6.89517 11.9999 5.99968 12.8953 5.99961 13.9999C5.99954 15.1044 6.89491 15.9999 7.99948 16H8.00053C9.1051 15.9999 10.0005 15.1044 10.0004 13.9999C10.0003 12.8953 9.10431 11.9999 7.99974 12Z"
          fill={fill}
          opacity={opacity}
        />
        <path
          d="M8.00001 11C9.65686 11 11 9.65685 11 8C11 6.34315 9.65686 5 8.00001 5C6.34315 5 5.00001 6.34315 5.00001 8C5.00001 9.65685 6.34315 11 8.00001 11Z"
          fill={fill}
          opacity={opacity}
        />
      </g>
      <defs>
        <clipPath id={clipPathId}>
          <rect width="16" height="16" fill="white" />
        </clipPath>
      </defs>
    </svg>
  )
}
